<template lang="pug">
.view-search
  .search-form(v-for="row in filter")
    template(v-for="item in row")
      .search-form-item(v-if="item.type === 'handle'")
        span(:style="{ display: 'inline-block', width: `${titleWidth}px`}")
        .search-button
          el-button(v-for="btn, index in item.buttons", size="small", :key="index", :type="btn.name", @click="btn.handle") {{btn.label}}
      .search-form-item(v-else-if="item.type === 'double'")
        span(:style="{ display: 'inline-block', width: `${titleWidth}px`}") {{item.name}}
        .price-item(v-for="num,index in item.price" :key="index")
          el-input.search-form_input.el-input_size(
            size="small"
            placeholder=""
            v-model="num[num.key]"
          )
          label(v-if="num.labelShow") -
      .search-form-item(v-else-if="item.type === 'treble'")
        span(:style="{ display: 'inline-block', width: `${titleWidth}px`}") {{item.name}}
        .price-item.treble-price-item(v-for="col, index in item[item.key]" :key="index")
          el-select.search-form_input.el-input_size(
            size="small"
            :placeholder="item.placeholder || '请选择'"
            v-model="col[col.key]"
            @change="col.handle(col)"
            v-if="col.options.length"
          )
            el-option(
              v-for="option, index in col.options",
              :key="col.optValue ? option[col.optValue] : option",
              :label="col.optLabel ? option[col.optLabel] : option",
              :value="col.optValue ? option[col.optValue] : option"
            )
          label(v-if="col.labelShow") -
      .search-form-item(v-else)
        span(:style="{ display: 'inline-block', width: `${titleWidth}px`}") {{item.name}}
        .form-item_body
          el-select.search-form_input(
            filterable
            clearable
            v-if="item.type === 'filterable'"
            v-model="item[item.key]"
            size="small"
            :filter-method="item.method"
            :placeholder="item.placeholder || '请输入内容'"
          )
            el-option(
              v-for="option,index in item.options",
              :key="item.optValue ? option[item.optValue] : option",
              :label="item.optLabel ? option[item.optLabel] : option",
              :value="item.optValue ? option[item.optValue] : option"
            )
          el-input.search-form_input(
            v-if="item.type === 'default'"
            size="small"
            :placeholder="item.placeholder || '请输入内容'"
            v-model="item[item.key]"
          )
          el-select(v-if="item.type === 'select'", size="small", v-model="item[item.key]", :placeholder="item.placeholder || '请选择'")
            <!-- el-option(label="全部", value="") -->
            el-option(
              v-for="option,index in item.options",
              :key="index",
              :label="item.optLabel ? option[item.optLabel] : option",
              :value="item.optValue ? option[item.optValue] : option"
            )
          el-date-picker(
            v-if="item.type === 'date'",
            v-model="item[item.key]",
            size="small",
            prefix-icon="none",
            type="daterange",
            range-separator="-",
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期",
            end-placeholder="结束日期",
          )
</template>

<script>
export default {
  name: 'viewSearch',
  props: {
    filter: Array,
    titleWidth: {
      default: '84',
      type: String
    },
  }
}
</script>

<style lang="scss" scoped>
.view-search {
  width: 100%;
}
.search-form_input{
  width: 220px;
}
.form-item_body {
  display: flex;
  align-items: center;
  width: 220px;
}
.search-form {
  display: flex;
  margin-bottom: 16px;
}
.treble-price-item {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}
.search-form-item {
  display: flex;
  align-items: center;
  margin-right: 30px;
  min-width: 320px;
}
.search-form-item span {
  display: inline-block;
  min-width: 100px;
  margin-right: 10px;
  text-align: right;
  font-size: 14px;
  color: #363636;
}
.search-form-item label {
  margin: 0 13px;
}
.search-form-item .el-input,
.search-form-item .el-select{
  width: 220px;
}
.search-form-item .el-input_size {
  width: 105px;
}
.price-item {
  &.treble-price-item {
    .el-input_size {
      width: 120px;
    }
  }
  .el-input_size {
    width: 94px;
  }
} 
.search-button {
  width: 220px;
  text-align: right;
}
.search-button .el-button {
  padding: 9px 23px;
}
.search-form-item .el-range-editor--small .el-range-input {
  font-size: 12px;
}
.search-form-item .el-date-editor--daterange.el-input__inner{
  width: 220px;
}
.search-form-item .el-date-editor .el-range-separator {
  width: 8%;
}
</style>
